<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <link rel="stylesheet" href="../../css/api.css">
      <link rel="stylesheet" href="../../css/base_bai/base.css">
      <title>立即提现</title>

      <style>

        html, body{font-size: 100%;background: #F5F5F5}
          .van-nav-bar .van-icon{color:black;}

          .prompt{display: flex;margin:1rem;}
          .prompt [font_sty]{color:#979899;font-size:.8rem;    padding-left: .2rem;}


          [p_1]{    background: #FF9900;display:grid;    justify-content: center;  align-items: center;height: 5rem;border-radius: .5rem;  margin: 1rem;color: white;}

          [p_1] span{font-size: 1.1rem;font-weight: 700}

            .total_price>div{display: flex;}

            .total_price>div:nth-child(1)>div{width: 33%;border:1px solid #FF9900;font-size:0.9rem;margin: 0.3rem;text-align: center;height: 3rem;line-height: 3rem;border-radius: 0.3rem;}

            .total_price .van-cell-group>div{border:1px solid #FF9900;font-size:0.9rem;margin: 0.3rem;text-align: center;border-radius: 0.3rem;    width: 100%;background-color: white;}

            .total_price input{    text-align: center;}

            .total_price .on{background: #FFAD33;color:white}

            .sub_sty{text-align: center;margin: 1rem 0}
            .sub_sty>button{background: #FFAD33;color:white;width: 90%;border-radius: 2rem;height: 40px;line-height: 32px}

            .switch_sty{display: flex;}
            .switch_sty >span{flex:1}
            .switch_sty >span:nth-child(2){text-align: right;padding-right: .5rem}
      </style>
  </head>
  <body>
  <div id="app" v-cloak>

    <div>
        <van-nav-bar class="m-header" title="立即提现" left-arrow @click-left="  closeWin()" />
    </div>

  <div p_1 style="">
        <div>
            <div>可提现红包金额</div>
            <div style="text-align: center;"><span>83.00</span> 元</div>
        </div>
  </div>
  <div class="prompt"><div><van-icon name="info-o" color="#1B91FF" /></div><div font_sty>正常提现24小时到账，节假日顺延</div></div>

<div style="margin:01rem ">

    <div class="switch_sty">
      <span style="font-size: .8rem;">提现至已绑定微信号钱包<span></span></span><span><van-switch v-model="checked"  size="22px" active-color="#FF9900"/></span>
    </div>
    <div class="total_price">
        <div>
            <div @click="count($event);total_price=100">100元</div>
            <div @click="count($event);total_price=200">200元</div>
            <div @click="count($event);total_price=500">500元</div>
        </div>
        <van-cell-group>
            <van-field v-model="total_price" type="number" placeholder="自定义输入红包金额" /></van-cell-group>
    </div>
</div>
<div  class="sub_sty">
    <van-button size="large">提交</van-button>
</div>

  </div>
  </body>
  <script src="../../script/api.js"></script>
  <script src="../../script/base_bai/vue.js"></script>
  <script src="../../script/base_bai/vant.js"></script>
  <script src="../../script/base_bai/base.js"></script>
  <script src="../../script/base_bai/temp.js"></script>
  <script type="text/javascript">
      apiready = function(){
            headerH = $api.fixStatusBar($api.byId('app'));
        Vue.prototype.$ac = api;
        initVue()
      };
      if (BrowserType() == 'pc') {
          initVue()
      }
      function initVue() {
          new Vue({
              el: '#app',

            data:{
            total_price:0,
            checked:true,
            },
            methods: {
              count(elem) {
                  var lsit_div = document.getElementsByClassName("total_price")[0].getElementsByTagName("div");
                  console.log()
                  for (var i = 0; i < lsit_div.length; i++) {
                      lsit_div[i].classList.remove("on")
                  }
                  elem.target.classList.add("on")
              }
            }

          })
      }
  </script>
  </html>
